<!DOCTYPE html>
<html xmlns:__html="http://www.w3.org/1999/xhtml">
<head>
    <link href="css/css/index.css" rel="stylesheet" type="text/css"/>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <meta name="author" content="www.lzqcode.com"/>
    <title>文章阅读</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/master.css"/>
    <link rel="stylesheet" href="css/gloable.css"/>
    <link rel="stylesheet" href="css/nprogress.css"/>
    <link rel="stylesheet" href="css/blog.css"/>

    <link rel="stylesheet" href="css/message.css"/>

    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/master.css"/>
    <link rel="stylesheet" href="css/gloable.css"/>
    <link rel="stylesheet" href="css/nprogress.css"/>
    <link rel="stylesheet" href="css/message.css"/>

    <script src="js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入VUE库 -->
    <script src="js/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


    <!--引入wangeditor和代码高亮.js和代码高亮.css-->
    <script src="./wangEditor-file/wangEditor.min.js" type="text/javascript" charset="UTF-8"></script>

    <link href="wangEditor-file/monokai_sublime.min.css" rel="stylesheet">

    <script src="./wangEditor-file/highlight.min.js" type="text/javascript" charset="UTF-8"></script>


    <!-- 引入组件库 -->
    <script src="js/js/myReplyPost.js"></script>
    <script src="js/js/index.js"></script>


    <style>
        .toolbar {
            border: 1px solid #ccc;
        }

        .text {
            border: 1px solid #ccc;
            max-height: 1000px;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="header">
    </div>

    <header class="gird-header">

        <div class="header-fixed">
            <my-header></my-header>
        </div>
    </header>
    <div class="doc-container" id="doc-container">
        <div class="container-fixed">
            <div class="col-content" style="width:100%">
                <div class="inner">
                    <article class="article-list">
                        <input type="hidden" value="@Model.BlogTypeID" id="blogtypeid"/>
                        <section class="article-item">
                            <aside class="title" style="line-height:1.5;">
                                <h4>{{problemMessage.title}}</h4>
                                <p class="fc-grey fs-14">
                                    <small>
                                        作者：<a :href="'personal.html?account='+problemMessage.account" target="_blank"
                                              class="fc-link">{{problemMessage.nickname}}</a>
                                    </small>
                                    <small class="ml10">回复量：<i class="readcount">回复量？？</i></small>
                                    <small class="ml10">发布于 <label>{{problemMessage.begintime}}</label> </small>
                                </p>
                            </aside>
                            <div class="time mt10" style="padding-bottom:0;">
                                <span class="day">{{problemMessage.date}}</span>
                                <span class="month fs-18">{{problemMessage.month}}<small class="fs-14">月</small></span>
                                <span class="year fs-18">{{problemMessage.year}}</span>
                            </div>
                            <div class="content artiledetail"
                                 style="border-bottom: 1px solid #e1e2e0; padding-bottom: 20px;">

                                <!--富文本编辑器-->
                                <div id="toolbar-container" class="toolbar"></div>
                                <div id="text-container" class="text"></div>

                                <div class="copyright mt20">
                                    <p class="f-toe fc-black">
                                        非特殊说明，本文版权归 ZQ个人博客 所有，转载请注明出处.
                                    </p>
                                    <p class="f-toe">
                                        本文标题：
                                        <a href="" class="r-title">{{problemMessage.title}}</a>
                                    </p>
                                </div>
                                <div id="aplayer" style="margin:5px 0"></div>
                                <h6>延伸阅读</h6>

                                <ol class="b-relation"></ol>
                            </div>
                            <div class="bdsharebuttonbox share" data-tag="share_1">
                                <ul>
                                    <li class="f-praise"><span><a class="s-praise"></a></span></li>
                                    <li class="f-weinxi"><a class="s-weinxi" data-cmd="weixin"></a></li>
                                    <li class="f-sina"><a class="s-sina" data-cmd="tsina"></a></li>
                                    <li class="f-qq" href="www.qq.com"><i class="fa fa-qq"></i></li>
                                    <li class="f-qzone"><a class="s-qzone" data-cmd="qzone"></a></li>
                                </ul>
                            </div>
                            <div class="f-cb"></div>
                            <div class="mt20 f-fwn fs-24 fc-grey comment"
                                 style="border-top: 1px solid #e1e2e0; padding-top: 20px;">
                            </div>
<!--                            发表文章-->
                            <fieldset class="layui-elem-field layui-field-title">
                                <legend>发表文章</legend>
                                <div class="layui-field-box">
                                    <div class="leavemessage" style="text-align:initial">
                                        <div class="layui-form blog-editor"
                                             action="" method="get" name="commentform" id="commentform">
                                            <div class="layui-form-item">
                                                <a :href="'putpost/add-post.html?problemId='+problemMessage.id">
                                                    <button class="layui-btn" style="margin-top: 20px;margin-bottom: 20px"
                                                            >发表文章
                                                    </button>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                            <ul class="blog-comment" id="blog-comment"></ul>
                        </section>
                    </article>
                </div>
            </div>

            <div class="f-cb"></div>
            <!--             回复帖子部分             民生各有所乐兮，余独好修以为常 -->
            <my-post></my-post>
        </div>
    </div>
    <footer class="grid-footer">
        <div class="footer-fixed">
            <div class="copyright">
                <div class="info">
                    <div class="contact">
                        <a href="javascript:void(0)" class="github" target="_blank"><i class="fa fa-github"></i></a>
                        <a href="#" class="qq" target="_blank"><i class="fa fa-qq"></i></a>
                        <a href="#" class="email" target="_blank"><i class="fa fa-envelope"></i></a>
                        <a href="javascript:void(0)" class="weixin"><i class="fa fa-weixin"></i></a>
                    </div>
                    <p class="mt05">
                        Copyright &copy; 2022-5 Knowledge Forum V.1.0.0 Power by 项目设计
                    </p>
                </div>
            </div>
        </div>
    </footer>


    <script src="layui/layui.js"></script>
    <script src="js/yss/gloable.js"></script>
    <script src="js/plugins/nprogress.js"></script>
    <script src="js/pagecomment.js"></script>
    <script>NProgress.start();</script>
    <script>
        window.onload = function () {
            NProgress.done();
        };
    </script>

    <script src="js/pagemessage.js"></script>

</div>
</body>

<script>
    var v = new Vue({
        el: "#app",
        data: {
            problemId: "1",//测试用字段
            problemMessage: [],//帖子、发布者、点赞等数量详情
            textarea: "v-model双向绑定",
            imageUrl: "",
            input3: "",
            select: "",
            bodys: "",
            //评论编辑区的内容
            replyText: "",
        },
        created() {
            let url = "QueryOneProblemSomeMessagesByIdServlet.s?problemId=";
            let id = location.search.replace(/\?problemId=(\d+)/, "$1");
            url += id;
            console.log("==============aaaaaaaaa==================")
            axios.get(url).then(res => {
                console.log("------------bbbbbbbbbb-----------------")
                this.problemMessage = res.data;
                console.log("this.problemMessage=",this.problemMessage)
                editor.txt.html(this.problemMessage.body);
                console.log("editor.gettext", editor.txt.text())
            })

        },
        methods: {

        }
    })
</script>

<!--wangEditor富文本框初始化-->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#toolbar-container', '#text-container') // 传入两个元素
    editor.config.height = 50
    editor.config.menus = []
    editor.config.zIndex = 9
    editor.create()
    editor.disable()
    editor.disable()
</script>

</html>
